<template>
  <Card v-bind="$attrs">
    <template #title>
      <Icon icon="ant-design:sound-outlined" class="m-1 pr-1" />
      <span>待办公告（{{total}}）</span>
    </template>
    <template #extra>
      <a-button type="link" size="small" @click="jump">查看更多 ></a-button>
    </template>
    <div style="max-height:500px; overflow-y: auto;">
      <List item-layout="horizontal" :data-source="noticeItems">
        <template #renderItem="{ item }">
          <ListItem>
            <ListItemMeta>
  
              <template #title>
                <div style="display: flex; justify-content: space-between;">
                  <div>
                    <span class="mr-6">{{ item.procIns?.procDef?.name }} </span>
                    <span>{{ item.name }} </span>
                  </div>
                  <div class="mr-2">
                    [{{ item.createTime}}]
                  </div>
                </div>
              </template>
              <template #description>
                <!-- [{{ item.createTime}}] -->
                <a @click="handleForm({ id: item.id })" v-if="item.id">
                  {{ item.procIns?.name}}
                </a>
                <a @click="handleForm2(item)" v-if="!item.id">
                  {{ item.procIns?.name}}
                </a>
              </template>
              <!-- <template #avatar>
                <Icon :icon="item.avatar" :size="30" />
              </template> -->
            </ListItemMeta>
            <div class="ml-4" style="width: 60px;">
              <a @click="handleTrace(item)" v-if="item.id">
                <Icon icon="fluent:flowchart-20-regular" size="18" />
              </a>
              <a class="ml-2" @click="handleForm({ id: item.id })"
                v-if="item.id && !(item.endTime && item.endTime != '')">
                <Icon icon="mdi:checkbox-marked-outline" size="18" />
              </a>
  
              <a class="ml-2" @click="handleForm2(item)" v-if="!item.id">
                <Icon icon="mdi:checkbox-marked-outline" size="18" />
              </a>
            </div>
  
          </ListItem>
        </template>
      </List>
    </div>
  

    <component :is="inputFormComponent" v-model:visible="inputFormVisible" @register="registerDrawer"
      @success="handleSuccess" />
    <BpmRuntimeTrace @register="registerTraceModal" />
  </Card>
</template>
<script lang="ts" setup>
  import { ComponentOptions, defineComponent, ref, shallowRef, onMounted } from 'vue';
  // import { onMounted } from 'vue';
  import { Card, List } from 'ant-design-vue';
  // import { noticeItems } from './data';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { router } from '/@/router';
  import { Icon } from '/@/components/Icon';
  import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
  import { bpmMyTaskList, bpmMyTaskForm } from '/@/api/bpm/myTask';
  import { bpmCategoryTreeData } from '/@/api/bpm/category';
  import { useDrawer } from '/@/components/Drawer';
  import { useModal } from '/@/components/Modal';
  import { FormProps } from '/@/components/Form';
  import { dynamicImport } from '/@/router/helper/routeHelper';
  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
  import { BpmRuntimeTrace } from '/@/components/Bpm';
  import qs from 'qs';
  import { bpmMyTaskIndexData, bpmMyTaskCountData } from '/@/api/test/testData';

  const { showMessage } = useMessage();

  const ListItem = List.Item;
  const ListItemMeta = List.Item.Meta;

  let total = ref < any > ('0')
  let noticeItems = ref < any > ([])

  onMounted(async () => {
    handleSuccess()
  });

  function jump() {
    router.push({
      // path: '/process/delay/pmDelay/list',
      path: '/bpm/bpmMyTask/todoList',
      // query: {
      // },
    })
  }

  const [registerDrawer, { setDrawerData }] = useDrawer();
  const inputFormComponent = shallowRef < Nullable < any >> (null);
  const inputFormVisible = ref < Boolean > (false);

  async function handleForm(record: Recordable) {
    const data = await bpmMyTaskForm(record);
    if (data.result == 'true') {
      const url = data.pcUrl;
      const idx = url.indexOf('?');
      // component
      let component: ReturnType<typeof defineComponent>;
      const compStr = idx == -1 ? url : url.substring(0, idx);
      if (compStr && compStr != '') {
        const imp = dynamicImport(compStr);
        if (imp) component = createAsyncComponent(imp);
      }
      // params
      let params = {};
      const paramStr = idx == -1 ? '' : url.substring(idx + 1);
      if (paramStr && paramStr != '') {
        params = qs.parse(paramStr);
      }
      // open
      if (component) {
        inputFormComponent.value = component;
        inputFormVisible.value = true;
        setDrawerData(params);
      }
    } else {
      showMessage(data.message);
    }
  }

  async function handleSuccess() {
    let res1 = await bpmMyTaskIndexData({ pageSize: 5, showRwfp: '1' });
    let res2 = await bpmMyTaskCountData({ showRwfp: '1' });
    noticeItems.value = res1.data
    total.value = res2.data
  }

  async function handleForm2(record: Recordable) {
    console.log(record.extendMap.bpmForm.pcUrl, 'record.extendMap.bpmForm.pcUrl===');
    // const data = await bpmMyTaskForm(record);
    // if (data.result == 'true') {
    const url = record.extendMap.bpmForm.pcUrl;
    const idx = url.indexOf('?');
    // component
    let component: ReturnType<typeof defineComponent>;
    const compStr = idx == -1 ? url : url.substring(0, idx);
    console.log(compStr, 'compStr==');
    if (compStr && compStr != '') {
      const imp = dynamicImport(compStr);
      if (imp) component = createAsyncComponent(imp);

      console.log(imp, 'imp==');

    }
    // params
    let params = {};
    const paramStr = idx == -1 ? '' : url.substring(idx + 1);
    if (paramStr && paramStr != '') {
      params = qs.parse(paramStr);
    }
    console.log(component, 'component==');
    // open
    if (component) {
      inputFormComponent.value = component;
      inputFormVisible.value = true;
      setDrawerData(params);
    }
    // } else {
    //   showMessage(data.message);
    // }
  }


  const [registerTraceModal, { openModal: traceModel }] = useModal();

  function handleTrace(record: Recordable) {
    traceModel(true, record.procIns);
  }

</script>